<html>
    <head>
        <title>sketch.js</title>
        <link rel="stylesheet" href="examples/css/main.css">
    </head>
    <body>
        <header class="introduction">
            <hgroup>
                <h1>Sketch.js</h1>
                <h2>Minimal JavaScript Creative Coding Framework</h2>
            </hgroup>
        </header>
        <nav class="navigation">
            <a href="https://github.com/soulwire/sketch.js">Github</a>
            <a href="https://github.com/soulwire/sketch.js/archive/master.zip">Download</a>
            <a href="https://github.com/soulwire/sketch.js/wiki/">Documentation</a>
            <a href="https://github.com/soulwire/sketch.js/wiki/API">API</a>
        </nav>
        <section class="showcase">
            <h3>Examples</h3>
            <figure>
                <a href="examples/drawing.html" target="_blank">
                    <img src="examples/img/drawing.jpg">
                </a>
                <figcaption>
                    <strong>Multi-touch drawing</strong>
                    <p>Basic example demonstrating how to set up a sketch and handle mouse / touch input</p>
                </figcaption>
            </figure>
            <figure>
                <a href="examples/particles.html" target="_blank">
                    <img src="examples/img/particles.jpg">
                </a>
                <figcaption>
                    <strong>Particles</strong>
                    <p>Create a multi-touch particle toy with sketch.js</p>
                </figcaption>
            </figure>
            <figure>
                <a href="http://soulwire.github.com/Plasmatic-Isosurface/" target="_blank">
                    <img src="examples/img/plasma.jpg">
                </a>
                <figcaption>
                    <strong>Plasmatic Isosurface</strong>
                    <p>An example using sketch.js in WebGL mode</p>
                </figcaption>
            </figure>
            <figure>
                <a href="examples/three.html" target="_blank">
                    <img src="examples/img/three.jpg">
                </a>
                <figcaption>
                    <strong>THREE.js</strong>
                    <p>How to integrate sketch.js with THREE.js</p>
                </figcaption>
            </figure>
            <figure>
                <a href="http://soulwire.github.com/Muscular-Hydrostats/" target="_blank">
                    <img src="examples/img/tentacles.jpg">
                </a>
                <figcaption>
                    <strong>Muscular Hydrostats</strong>
                    <p>An interactive canvas demo powered by sketch.js</p>
                </figcaption>
            </figure>
            <figure>
                <a href="http://soulwire.github.com/Crystallisation/" target="_blank">
                    <img src="examples/img/crystallization.jpg">
                </a>
                <figcaption>
                    <strong>Crystallisation</strong>
                    <p>An experiment which uses sketch.js with CoffeeScript</p>
                </figcaption>
            </figure>
            <figure>
                <a href="http://soulwire.github.io/WebGL-GPU-Particles/" target="_blank">
                    <img src="examples/img/webgl-particles.jpg">
                </a>
                <figcaption>
                    <strong>1 Million Particles</strong>
                    <p>Moving lots of particles around on the GPU</p>
                </figcaption>
            </figure>
            <figure>
                <a href="http://lab.hakim.se/linjer/" target="_blank">
                    <img src="examples/img/linjer.jpg">
                </a>
                <figcaption>
                    <strong>Linjer</strong>
                    <p><a href="http://hakim.se/" target="_blank">Hakim El Hattab</a> used sketch.js in this awesome interactive experiment</p>
                </figcaption>
            </figure>
            <figure>
                <a href="http://codepen.io/MatthewWagerfield/full/ueIln" target="_blank">
                    <img src="examples/img/pulse.jpg">
                </a>
                <figcaption>
                    <strong>Pulse</strong>
                    <p><a href="http://wagerfield.com/" target="_blank">Matthew Wagerfield</a>'s beautiful geometric canvas experiment build on sketch.js</p>
                </figcaption>
            </figure>
            <figure>
                <a href="http://codepen.io/jackrugile/full/IjKLt" target="_blank">
                    <img src="examples/img/bubbles.jpg">
                </a>
                <figcaption>
                    <strong>Bubbles</strong>
                    <p>Interactive canvas demo by <a href="http://jackrugile.com/" target="_blank">Jack Rugile</a></p>
                </figcaption>
            </figure>
            <figure>
                <a href="http://codepen.io/jackrugile/full/Apfyn" target="_blank">
                    <img src="examples/img/parallax.jpg">
                </a>
                <figcaption>
                    <strong>Parallax Mountains</strong>
                    <p>Excellent parallax effect from <a href="http://jackrugile.com/" target="_blank">Jack Rugile</a>, using the sketch.js 2d canvas</p>
                </figcaption>
            </figure>
            <figure>
                <a href="http://codepen.io/jackrugile/full/qLCuE" target="_blank">
                    <img src="examples/img/skyline.jpg">
                </a>
                <figcaption>
                    <strong>Parallax Skyline</strong>
                    <p>Another parallax variation from <a href="http://jackrugile.com/" target="_blank">Jack Rugile</a></p>
                </figcaption>
            </figure>
            <figure>
                <a href="http://codepen.io/jackrugile/full/swLat" target="_blank">
                    <img src="examples/img/swarm.jpg">
                </a>
                <figcaption>
                    <strong>Swarming Bugs</strong>
                    <p><a href="http://jackrugile.com/" target="_blank">Jack Rugile</a> creates wonderful hungry creatures that search for food</p>
                </figcaption>
            </figure>
            <figure>
                <a href="http://refactored.fr/physics/sketch/" target="_blank">
                    <img src="examples/img/cloth.jpg">
                </a>
                <figcaption>
                    <strong>Cloth</strong>
                    <p>An experiment simulating cloth by <a href="http://refactored.fr/" target="_blank">Tony Broyez</a></p>
                </figcaption>
            </figure>
            <figure>
                <a href="http://codepen.io/molefrog/full/pilHJ" target="_blank">
                    <img src="examples/img/flowers.jpg">
                </a>
                <figcaption>
                    <strong>Random Flowers</strong>
                    <p>Animated generative flowers by <a href="http://molefrog.com/" target="_blank">Alexey Taktarov</a></p>
                </figcaption>
            </figure>
        </section>
        <footer class="footer">
            <p>Using sketch.js? Let me know: justin [at] soulwire.co.uk</p>
        </footer>
    </body>
</html>